<style>
	uni-page-body,.c1{
		height: 100%;
	}
	.c2{
		font-size: 15px;
	}
	.c3{
		font-size: 10px;
		color: #999;
		margin-top: 5px;
	}
	.c4{
		text-align: center;
		margin-top: 10px;
	}
	.c00{
	
		width: 100%;
		border-bottom: 1px solid #eee;
		overflow-y: scroll;
  
  padding:15px;
	}
	.c8{
		display: grid;
		grid-template-rows: 50px auto 80px auto;
		height: 100%;
		border-top: 1px solid #eee;
	}
	.c20{
		padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-top: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  height: 62px;
  margin-bottom: 10px;
	}
	.c-btn{
		background: #ff754b;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  line-height: 40px;
  border-radius: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
	}

	.progress-box {
		display: flex;
		height: 50rpx;
		margin-top: 7px;
		background: #e2e3e3;
		position: relative;
	}

	.uni-icon {
		line-height: 1.5;
	}

	.progress-cancel {
		margin-left: 40rpx;
	}

	.progress-control button {
		margin-top: 20rpx;
	}

	.uni-progress{
		width: 100% !important;
	}

	.c40{
		display: grid;
		grid-template-columns: 100px auto 30px 50px;
	}
	.c41{
		font-size: 12px;
		color: #999;
		line-height: 26px;
		white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  text-align: right;
	}

	.p{
	
		position: absolute;
  right: 0px;
  left: 0px;
  text-align: center;
  font-size: 9px;
  color: #fff;
  bottom: -7px;
  font-weight: bold;

	}
	.c200{
		width: 100%;
		background: #31f714;
	}

	.progress-box{
		height: 12px;
	}

page,page-body,page-wrapper,.c1, .c8{
	height: 100% !important;
}


</style>
<template>
	<view class="c1">
		<view v-show="eshow" class="c8">
			<view class="c4">
				<view class="c2">选定菜品数据</view>
				<view class="c3">仅统计本机数据</view>
			</view>
			<view  class="c00">
				


				<!-- <view v-for="vokcais in okcais" class="c40">
		
					<view class="c41">{{vokcais.name}}</view>
					<view class="progress-box">
						<view class="c200" 
						:style="'width: '+[vokcais.count >= 100 ? '100%' : vokcais.count] +'%;'" activeColor="#10AEFF" stroke-width="3"></view>
						<view class="c41 p">{{vokcais.count}}%</view>
					</view>
					<view></view>
					<view></view>
				</view> -->
				<view class="charts-box">
		        <!-- 注意：因各小程序及app端通过组件均不能传递function类型参数，组件内所有formatter方法，均需使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function -->
		        <!-- 饼图的format需要挂到chartData中的series[i].format上，例如pieFormatDemo.series[i].format="pieDemo"。当使用localdata数据渲染图表时，因series是组件自动拼接的，暂时不支持使用format -->
		            <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
		        </view>


			</view>
			<view class="c20">
				<view class="c-btn" @click="confirm">清空数据</view>
			</view>
			<view></view>
		</view>
	</view>
</template>


<script>

	import cailist from "@/data/data.js";
	import demodata from '@/data/demodata.js';

	import uCharts from '@/static/js/config-ucharts.js';

	export default {

		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					addressName: '在地图选择',
					address: '',
					area: '',
					default1: true,
					default2: true,
					default3: true,
					default4: true,
					type:""
				},
				array: [{name: '随便凑合'}, {name:'大吃一顿'}],
				index: 0,
				array1: [
					{name: '不限'},
					{name: '早餐'}, 
					{name: '午餐'}, 
					{name: '晚餐'},
					{name: '夜宵'}
				],
				index1:0,
				styleshow:false,
				cailist:cailist.cailist,
				okcais:[],
				eshow:true,
				chartsDataLine1: {},
	            chartsDataColumn2: {},
	            chartsDataPie1:{},
	            tooltipFormatTemp:"tooltipTemp1"
			}
		},
		onShow(){
			
			this.loadpage();

		},
		onLoad(option){

	

		},
		methods: {
			getServerData(r) {
	           
            	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
            	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
                this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.demodata.Line))

                //数据点格式化示例
                //使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function 
            	let columnFormatDemo=JSON.parse(JSON.stringify(demodata.demodata.Column))
                for (var i = 0; i < columnFormatDemo.series.length; i++) {
                    columnFormatDemo.series[i].format="seriesDemo1"
                }
                this.chartsDataColumn2=columnFormatDemo

            //饼图格式化示例
            //使用format属性指定config-ucharts.js里事先定义好的formatter的key值，组件会自动匹配与其对应的function 
                let pieFormatDemo=JSON.parse(JSON.stringify(demodata.demodata.PieA))
                for (var i = 0; i < pieFormatDemo.series.length; i++) {
                    pieFormatDemo.series[i].format="pieDemo"
                }

                pieFormatDemo.series[0].data=r

                this.chartsDataPie1=pieFormatDemo



	        },
			//提交
			confirm(){
				uni.showModal({
					title:"提示",
				    content: "确定要清空并且重新统计吗?",
				    success: (e)=>{
				    	if(e.confirm){
				    		// localStorage.setItem('okcai', "");
				    		uni.setStorageSync('okcai', "" );
				    		setTimeout(()=>{
				    			uni.reLaunch({
				    				url:"/pages/index/index"
				    			});
				    		}, 200)
				    	}
				    	return;
				    }
				});
				
			},
			loadpage(){


				var cailists=uni.getStorageSync("cailist");
				if (!cailists) {
					uni.setStorageSync('cailist', JSON.stringify(this.cailist));
				}else{
					cailists=JSON.parse(cailists);
					this.cailist=cailists;
				}

				var gOkcai="";

				gOkcai=uni.getStorageSync("okcai");
				if (!gOkcai) {

					this.eshow=false;
					uni.showModal({
						title:"提示",
					    content: "还没有数据, 请在首页选定菜品, 系统才会记录数据",
					    showCancel:false,
					    success: (e)=>{
					    	if(e.confirm){
					    		uni.reLaunch({
				    				url:"/pages/index/index"
				    			});
					    	}
					    }
					});
				}

				gOkcai=JSON.parse(gOkcai);
				this.getServerData(gOkcai);
				// this.okcais=gOkcai;
				// console.log(this.okcais);
			}

		}
	}
</script>